<template>
	<uni-popup ref="popup" type="bottom">
		
		<view class="content column">
			<text class="mix-icon icon-guanbi" @click="close"></text>
			
			<view class="pro-info column">
				<view class="row">
					<text class="price">{{ infoData.name }}</text>
				</view>
				<view class="row">
					<image class="pic" :src="infoData.image " mode="aspectFill"></image>
					<view class="right column">
						<view class="cell">
							<text class="tit fill">姓名</text>
						</view>
						<view class="cell b-b">
							<!-- v-model="game.phone" -->
							<input class="input" v-model="player.name" type="text" maxlength="20" placeholder-class="placeholder" placeholder="请输入姓名" >
						</view>
						<view class="cell">
							<text class="tit fill">电话</text>
						</view>
						<view class="cell b-b">
							<!-- v-model="game.phone" -->
							<input class="input" v-model="player.phone" type="text" maxlength="20" placeholder-class="placeholder" placeholder="请输入电话" >
						</view>
					</view>
				</view>
				
			</view>
			<view class="btn-wrap row">
				<view class="confirm-btn center" @click="confirm(type)" v-if="type=='join'||type=='pay'">
					<text>金额：{{ infoData.entryFee || 0 }}元  确认支付</text>
				</view>
				<view class="confirm-btn center" @click="confirm(type)" v-if="type=='unjoin'">
					<text>取消报名</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {getUnique} from '@/common/js/util'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				type: '', //cart加入购物车 buy立即购买
				data: {
					playerName: '',
					playerPhone: ''
				}
				
			}
		},
		props: {
			infoData: {
				type: Object,
				default(){
					return {}
				}
			},
		},
		watch: {
			infoData(infoData){
				// console.log("watch infoData data "+JSON.stringify(data))
				// console.log("=onShow=this.player=="+JSON.stringify(this.player))
				this.data.playerName = this.player.name;
				this.data.playerPhone = this.player.phone;
			}
		},
		computed: {
			...mapState(['userInfo', 'player']),
		},
		methods: {
			//结算
			confirm(type){
				// console.log("==comfirm=="+type)
				// console.log(">>>>>>>>>>>>>data=="+JSON.stringify(this.data))
				this.$emit(type, this.player);
			},
			open(type){
				this.type = typeof type === 'string' ? type: '';
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: auto;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		position: relative;
	}
	.icon-guanbi{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		padding: 20rpx;
		font-size: 32rpx;
		color: #999;
	}
	.pro-info{
		padding: 30rpx 32rpx 16rpx;
		
		.pic{
			flex-shrink: 0;
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			background-color: #f7f7f7;
			border-radius: 10rpx;
		}
		.price{
			padding-top: 10rpx;
			margin-bottom: 26rpx;
			font-size: 34rpx;
			color: $base-color;
			font-weight: 700;
		}
		.stock{
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
		.attr-wrap{
			flex-wrap: wrap;
			
			text{
				line-height: 1.4;
				font-size: 24rpx;
				color: #333;
			}
			.attr{
				flex-shrink: 0;
				margin-right: 10rpx;
				color: #999;
				
				&.checked{
					color: #333;
				}
			}
		}
	}
	.s-tit{
		margin-left: 42rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 700;
		line-height: 90rpx;
	}
	.title{
		margin-left: 42rpx;
		font-size: 30rpx;
		color: #999999;
		font-weight: 700;
		line-height: 90rpx;
	}
	.value{
		margin-left: 42rpx;
		font-size: 24rpx;
		color: #000000;
		line-height: 90rpx;
		// border-bottom: ;
		// transform: scaleY(0.5);
		border-bottom: 1px solid #e0e0e0;
	}
	.c-wrap{
		min-height: 20vh;
		max-height: 60vh;
	}
	.sku-list{
		.attrs{
			display: flex;
			flex-wrap: wrap;
			padding-left: 32rpx;
			padding-right: 20rpx;
		}
		.attr{
			min-width: 58rpx;
			height: 58rpx;
			padding: 0 24rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: #333;
			
			&:after{
				border-color: #e0e0e0;
			}
			&.active{
				color: $base-color;
				background-color: rgba(255, 82, 111, .03);
			
				&:after{
					border-color: rgba(255, 82, 111, .5);
				}
			}
			&.disabled{
				background-color: #ddd;
			}
		}
	}
	.number-wrap{
		padding-right: 40rpx;
	}
	.btn-wrap{
		align-items: flex-end;
		justify-content: center;
		padding: 36rpx 0 30rpx;
	}
	.confirm-btn{
		width: 670rpx;
		height: 84rpx;
		background-color: $base-color;
		font-size: 32rpx;
		color: #fff;
		border-radius: 100rpx;
	}
	.sm{
		width: 670rpx;
		margin: 0 auto;
		
		.btn{
			flex: 1;
			height: 84rpx;
			font-size: 32rpx;
			color: #fff;
			background-color: orange;
			border-radius: 100rpx 0 0 100rpx;
			
			&:last-child{
				background-color: $base-color;
				border-radius: 0 100rpx 100rpx 0;
			}
		}
	}
	
	.cell{
		display: flex;
		align-items: center;
		// min-height: 50rpx;
		margin-top: 20rpx;
		padding: 0 40rpx;
		width: 400rpx;
		// background-color: #07C160;
		.desc{
			font-size: 24rpx;
			color: $red;
			margin-left: 10rpx;
		}
		&:first-child{
			margin-bottom: 10rpx;
		}
		&:after{
			left: 40rpx;
			right: 40rpx;
			// border-color: #000000;
			border-bottom: 2px solid #000000;
		}
		.tit{
			font-size: 30rpx;
			color: #333;
		}
		.input{
			flex: 1;
			text-align: left;
			font-size: 28rpx;
			color: #333;
			// background-color: #F7F7F7;
			
		}
		switch{
			margin: 0;
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}
		.tip{
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
		.checkbox{
			padding: 12rpx 0 12rpx 40rpx;
			font-size: 28rpx;
			color: #333;
			
			.mix-icon{
				margin-right: 12rpx;
				font-size: 36rpx;
				color: #ccc;
			}
			.icon-xuanzhong{
				color: $base-color;
			}
		}
	}
</style>
